﻿@{
    ViewBag.Title = "Profiles";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<table id="marbleTable" class="stripe row-border order-column">
    <thead>
        <th>ID</th>
        <th>Name</th>
        <th>Normal Price</th>
        <th>VIP Price</th>
        <th>Credit Allowed</th>
        <th>Bonus Allowed</th>
        <th>Courtesy Allowed</th>
        <th>Time Allowed</th>
        <th>Configure</th>
        <th>Tiket Allowed On Credit</th>
        <th>Tiket Allowed On Bonus</th>
        <th>Tiket Allowed On Courtesy</th>
        <th>Tiket Allowed On Time</th>
        <th>Last UpdatedBy</th>
        <th>Last UpdatedDate</th>
    </thead>
    @foreach (var item in ViewBag.gameProfiles)
    {  
        <tr onchange="UpdatedList(this)">
            <td> <lable class="fixedCol1">@(item.Id == 0 ? "" : item.Id) </lable> </td>
            <td>
                <input class="fixedCol2" type="text" value="@item.Name" />
            </td>
            <td>
                <input type="number" value="@item.NormalPrice" />
            </td>
            <td>
                <input type="number" value="@item.VIPPrice" />
            </td>
            <td>
                <input type="checkbox"  @(item.CreditAllowed ? "checked='checked'" : "") value="@item.CreditAllowed" />
            </td>
            <td>
                <input type="checkbox"  @(item.BonusAllowed ? "checked='checked'" : "") value="@item.BonusAllowed" />
            </td>
            <td>
                <input type="checkbox"  @(item.CourtesyAllowed ? "checked='checked'" : "") value="@item.CourtesyAllowed" />
            </td>
            <td>
                <input type="checkbox"  @(item.TimeAllowed ? "checked='checked'" : "") value="@item.TimeAllowed" />
            </td>
            <td>
                <button onclick="ConfigureGameProfile()">-</button>
            </td>
            <td>
                <input type="checkbox"  @(item.TiketAllowedOnCredit ? "checked='checked'" : "") value="@item.TiketAllowedOnCredit" />
            </td>
            <td>
                <input type="checkbox"  @(item.TiketAllowedOnBonus ? "checked='checked'" : "") value="@item.TiketAllowedOnBonus" />
            </td>
            <td>
                <input type="checkbox"  @(item.TiketAllowedOnCourtesy ? "checked='checked'" : "") value="@item.TiketAllowedOnCourtesy" />
            </td>
            <td>
                <input type="checkbox"  @(item.TiketAllowedOnTime ? "checked='checked'" : "") value="@item.TiketAllowedOnTime" />
            </td>
            <td>
                <input type="text" value="@item.LastUpdatedBy" disabled/>
            </td>
            <td>
                <input type="text" value="@item.LastUpdatedDate" disabled/>
            </td>

        </tr>  
    }
</table>

<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveGameProfiles()">Save</button>
    <button class="btn btn-primary btn-md" role="button" id="addRow">Add</button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();" id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/'">Close</button>
</div>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').collapse({
            toggle: false
        });
    })
    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            },
            //order: [[ 0, "desc" ]],
            fixedColumns: {
                leftColumns: 2
            }
        });
        var counter = 1;

        $('#addRow').on('click', function () {
            var fixedcolumn1values = $('.DTFC_Cloned lable.fixedCol1');
            var fixedcolumn2values = $('.DTFC_Cloned input.fixedCol2');

            table.row.add([
                '<lable class="fixedCol1"></lable>',
                '<input class="fixedCol2" type="text" value="" />',
                '<input type="number" value="" />',
                '<input type="number" value="" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<button onclick="ConfigureGameProfile()">-</button>',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="text" value="" disabled/>',
                '<input type="text" value="" disabled/>',
            ]).draw(false);

            for (var i = 0, j = fixedcolumn1values.length; i < j; i++) {
                $('.DTFC_Cloned lable.fixedCol1')[i].innerHTML = fixedcolumn1values[i].innerHTML;
            }
            for (var i = 0, j = fixedcolumn2values.length; i < j; i++) {
                $('.DTFC_Cloned input.fixedCol2')[i].value = fixedcolumn2values[i].value;
            }
        });
        $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
    });

    function SaveGameProfiles() {
        var gameProfiles = [];
        var table = document.getElementById('marbleTable');
        var fixedcolumn1 = $('.DTFC_Cloned lable.fixedCol1');
        var fixedcolumn2 = $('.DTFC_Cloned input.fixedCol2');

        for (var r = 0, n = table.rows.length; r < n; r++) {
            var rowIndex = r + 1;
            if (updatedArray.includes(r)) {
                gameProfiles.push({
                    Id: fixedcolumn1[r].innerHTML,
                    Name: fixedcolumn2[r].value,
                    NormalPrice: table.rows[rowIndex].cells[2].children[0].value,
                    VIPPrice: table.rows[rowIndex].cells[3].children[0].value,
                    CreditAllowed: table.rows[rowIndex].cells[4].children[0].checked,
                    BonusAllowed: table.rows[rowIndex].cells[5].children[0].checked,
                    CourtesyAllowed: table.rows[rowIndex].cells[6].children[0].checked,
                    TimeAllowed: table.rows[rowIndex].cells[7].children[0].checked,
                    TiketAllowedOnCredit: table.rows[rowIndex].cells[9].children[0].checked,
                    TiketAllowedOnBonus: table.rows[rowIndex].cells[10].children[0].checked,
                    TiketAllowedOnCourtesy: table.rows[rowIndex].cells[11].children[0].checked,
                    TiketAllowedOnTime: table.rows[rowIndex].cells[12].children[0].checked
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateProfiles", "Game")',
            data: JSON.stringify({ gameProfiles: gameProfiles }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(index) {
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }
    function ConfigureGameProfile() {

    }
</script>

